<template>
  <section class="loginContainer">
    <div class="header">
      <span class="_icon _i1" @click="goTo('/mine')">
        <i class="el-icon-arrow-left"></i>
      </span>
      <span class="_icon _i2" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div class="loginInner">
      <div class="login_header">
        <h2 class="login_logo">渡客</h2>
        <div class="login_header_title">
          <a
            href="javascript:;"
            :class="{ on: loginWay }"
            @click="loginWay = true"
            >密码登录</a
          >
          <a
            href="javascript:;"
            :class="{ on: !loginWay }"
            @click="loginWay = false"
            >短信登录</a
          >
        </div>
      </div>
      <div class="login_content">
        <div :class="{ on: loginWay }">
          <mu-container>
            <mu-form ref="form" :model="validateForm" class="mu-demo-form">
              <mu-form-item
                label="手机号码"
                help-text="帮助文字"
                prop="username"
                :rules="phoneRules"
              >
                <mu-text-field
                  v-model="validateForm.username"
                  prop="username"
                ></mu-text-field>
              </mu-form-item>
              <mu-form-item label="短信验证码" prop="password" :rules="remessageRules">
                <mu-text-field
                  type="password"
                  v-model="validateForm.password"
                  prop="password"
                ></mu-text-field>
              </mu-form-item>
            </mu-form>
          </mu-container>
        </div>
        <div :class="{ on: !loginWay }">
          <mu-container>
            <mu-form ref="form" :model="validateForm" class="mu-demo-form">
              <mu-form-item
                label="邮箱"
                help-text="帮助文字"
                prop="username"
                :rules="usernameRules"
              >
                <mu-text-field
                  v-model="validateForm.username"
                  prop="username"
                ></mu-text-field>
              </mu-form-item>
              <mu-form-item label="密码" prop="password" :rules="passwordRules">
                <mu-text-field
                  type="password"
                  v-model="validateForm.password"
                  prop="password"
                ></mu-text-field>
              </mu-form-item>
            </mu-form>
          </mu-container>
        </div>
        <section class="login_hint">
          温馨提示：未注册青年E融资帐号的手机号，登录时将自动注册，且代表已同意
          <a href="javascript:;">《用户服务协议》</a>
        </section>
        <button class="login_submit">登录</button>
        <a href="javascript:;" class="about_us">关于我们</a>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      loginWay: true,
      input: '',
      usernameRules: [
        { validate: val => !!val, message: '必须填写用户名' },
        // eslint-disable-next-line standard/object-curly-even-spacing
        {
          validate: val => val.length >= 3,
          message: '用户名长度大于3'
        }
      ],
      passwordRules: [
        { validate: val => !!val, message: '必须填写密码' },
        {
          validate: val => val.length >= 3 && val.length <= 10,
          message: '密码长度大于3小于10'
        }
      ],
      phoneRules: [
        { validate: val => !!val, message: '必须填写手机号' },
        // eslint-disable-next-line standard/object-curly-even-spacing
        {
          validate: val => val.length >= 3,
          message: '手机号为11位数字'
        }
      ],
      remessageRules: [
        { validate: val => !!val, message: '必须填写短信验证码' },
        {
          validate: val => val.length >= 3 && val.length <= 10,
          message: '短信验证码长度为5'
        }
      ],
      argeeRules: [{ validate: val => !!val, message: '必须同意用户协议' }],
      validateForm: {
        username: '',
        password: '',
        isAgree: false
      }
    }
  },

  computed: {},

  methods: {
    goTo: function (Path) {
      this.$router.replace(Path)
    },
    submit () {
      this.$refs.form.validate().then((result) => {
        console.log('form valid: ', result)
      })
    },
    clear () {
      this.$refs.form.clear()
      this.validateForm = {
        username: '',
        password: '',
        isAgree: false
      }
    }
  },

  components: {}
}
</script>

<style lang="scss" scoped>
.loginContainer {
  width: 100%;
  height: 800px;
  background: #ffffff;

  .header {
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 100;

    ._icon {
      height: 50px;
      width: 50px;
      position: absolute;
      right: 0;
      font-size: 35px;
      color: #666;
      line-height: 50px;
      text-align: center;
    }

    ._i1 {
      font-size: 30px;
      left: 0;
    }
  }

  .loginInner {
    padding-top: 10vh;
    width: 80%;
    margin: 0 auto;

    .login_header {
      .login_logo {
        font-size: 40px;
        font-weight: bold;
        color: #c7000b;
        text-align: center;
      }

      .login_header_title {
        padding-top: 20px;
        text-align: center;

        > a {
          color: #333;
          font-size: 16px;
          padding-bottom: 4px;

          &:first-child {
            margin-right: 40px;
          }

          &.on {
            color: #ff333d;
            font-weight: 700;
            border-bottom: 2px solid #ff333d;
          }
        }
      }
    }

    .login_content {
      position: relative;
      .container{
        top:1vh;
        position: relative;
      }
      .mu-form-item{
        text-align: left !important;
      }
      .on {
        display: none;
        position: relative;
        top: 15px;
      }

      .login_message {
        width: 100%;
        position: relative;
        margin: 10px 0;
        float: left;
      }

      .login_button {
        position: absolute;
        width: 30%;
        right: 0;
        top: 10px;

        z-index: 300;

        input {
          width: 100%;
          height: 100%;
          padding-left: 10px;
          box-sizing: border-box;
          border: 1px solid #ddd;
          border-radius: 4px;
          outline: 0;
          font: 400 14px Arial;

          &:focus {
            border: 1px solid #02a774;
          }
        }
      }
    }

    .login_hint {
      margin-top: 13px;
      color: #999;
      font-size: 14px;
      line-height: 20px;

      > a {
        color: #0099ff;
      }
    }

    .login_submit {
      display: block;
      width: 100%;
      height: 42px;
      margin-top: 30px;
      border-radius: 4px;
      background: #c7000b;
      color: #fff;
      text-align: center;
      font-size: 16px;
      line-height: 42px;
      border: 0;
    }

    .about_us {
      display: block;
      font-size: 14px;
      margin-top: 20px;
      text-align: center;
      color: #999;
    }
  }
}
</style>
